<template>
  <div class="left-menu">
    <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="user">
      <li class="layui-nav-item">
        <a href="/user/index">
          <i class="layui-icon" style="margin-right: 10px">&#xe609;</i>
          我的主页
        </a>
      </li>
      <li class="layui-nav-item" v-for="(item, index) in menuData" :key="'menu'+ index" :class="act === index ? 'layui-this' : ''">
        <router-link :to="{ name: item.path }">
          <i class="layui-icon" :class="item.icon" style="margin-right: 10px"></i>
          {{ item.title }}
        </router-link>
      </li>
    </ul>
    <keep-alive>
      <router-view style="width: 950px"></router-view>
    </keep-alive>
  </div>
</template>

<script>
// layui-this
export default {
  name: 'left-menu',
  data () {
    return {
      menuData: [
        {
          id: 1,
          path: 'UserCenter',
          icon: 'layui-icon-add-circle',
          title: '用户中心'
        },
        {
          id: 2,
          path: 'info',
          icon: 'layui-icon-set',
          title: '基本设置'
        },
        {
          id: 3,
          path: 'message',
          icon: 'layui-icon-username',
          title: '我的消息'
        }
      ],
      act: this.$store.state.menuId
    }
  },
  watch: {
    $route: {
      handler: function (newVal, oldVal) {
        if (newVal.matched[1].name === 'UserCenter') {
          this.act = 0
        }
        if (newVal.matched[1].name === 'setting') {
          this.act = 1
        }
        if (newVal.name === 'message') {
          this.act = 2
        }
      },
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>
.left-menu {
  width: 1170px;
  margin: 20px auto;
  display: flex;
}
</style>
